/**
 * FormPanel
 */
// FormPanel
function simpleForm() {
	// 初始化错误提示方法
	Ext.QuickTips.init();
	var fPanel = new Ext.form.FormPanel({
		title : "用户基本信息",
		width : 350,
		height : 400,
		labelWidth : 80,
		style : 'margin:10px 5px 15px 20px;',
		buttons : [ {
			text : "提交",
			handler : function() {
				/*
				 * 要对表单里面的东西进行操作，需要用到BasicForm类中的方法
				 * 要得到一个BasicForm的实例，需要调用FormPanel对象上的getForm()方法，或者fp.form
				 */
				fPanel.getForm().submit({
					url : "reg.jsp",
					success : function() {
						Ext.Msg.alert("提示", "数据保存成功!");
					}
				});
			}

		}, {
			text : "重置",
			handler : function() {
				// 取值
				Ext.Msg.alert("提示", fPanel.form.findField("name").getValue());
				fPanel.form.reset();
			}
		}, {
			text : "设值",
			handler : function() {
				fPanel.form.setValues({
					name : "小明",
					email : "Steffan.fan@foxmail.com"
				});
			}
		}, {
			text : "加载数据",
			handler : function() {
				fPanel.form.load({
					url : "getReg.jsp",
					params : {
						id : 5
					}
				});
			}
		} ],
		// 排列顺序，默认left
		// labelAlign : "right",
		// method : "post",
		// 如果需要设置文件上传为true，ajax提交就会自己生成一个iframe，导致fireBug检测不到
		// fileUpload : true,
		items : [ {
			xtype : "textfield",
			fieldLabel : "姓名",
			name : "name"
		}, {
			xtype : "textfield",
			fieldLabel : "密码",
			name : "password",
			inputType : "password"
		}, {
			xtype : "textfield",
			fieldLabel : "电子邮件",
			name : "email"
		}, {
			xtype : "datefield",
			fieldLabel : "出生日期",
			name : "bornDate"
		}, {
			// 富文本框
			xtype : "textarea",
			fieldLabel : "简介",
			name : "introduction"
		} ]
	});
	fPanel.render("form");
}

// layoutFormPanel
function layoutForm() {
	var fPanel = new Ext.Panel({
		title : "用户基本信息",
		width : 600,
		height : 400,
		labelWidth : 80,
		// 表单布局formLayout
		layout : "form",
		// css样式
		style : 'margin:10px 5px 15px 20px;',
		buttons : [ {
			text : "提交",
			handler : function() {

			}

		}, {
			text : "重置",
			handler : function() {

			}
		} ],
		items : [ {
			// 列布局columnLayout
			layout : "column",
			border : false,
			items : [ {
//				title : "列1",
				// 表单布局formLayout
				layout : "form",
				labelWidth : 80,
				border : false,
				items : [ {
					xtype : "textfield",
					fieldLabel : "姓名",
					name : "name"
				}, {
					xtype : "textfield",
					fieldLabel : "电子邮件",
					name : "email"
				} ]

			}, {
//				title : "列2",
				// 表单布局formLayout
				layout : "form",
				labelWidth : 80,
				border : false,
				items : [ {
					xtype : "textfield",
					fieldLabel : "密码",
					name : "password",
					inputType : "password"
				}, {

					xtype : "datefield",
					fieldLabel : "出生日期",
					name : "bornDate"
				} ]
			}]
		}, {
			// 富文本框
			xtype : "textarea",
			fieldLabel : "简介",
			anchor : "-80",
			name : "introduction"
		} ]
	});
	fPanel.render("form");
}
// 通过Ext.onReady来开始调用Ext组件
Ext.onReady(layoutForm);